<template>
        <div>
       <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="18">
          <el-input placeholder="商户编号" v-model="searchModel.coid" clearable> </el-input>
          <el-button @click="getoriginList" type="primary" icon="el-icon-search" round>Select</el-button>
        </el-col>
        <el-col :span="6" align="right">
          <el-button @click="openEditUI(null)" type="primary" icon="el-icon-plus" circle></el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 结果列表 -->
    <el-card>
            <el-table :data="originList" stripe style="width: 100%">
                <el-table-column label="#" width="80">
                    <template slot-scope="scope">
                        {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                
                <el-table-column prop="coid" label="originid" width="180">
                </el-table-column>
                <el-table-column prop="originname" label="name" width="180">
                </el-table-column>
                <el-table-column prop="originphone" label="phone" width="180">
                </el-table-column>
                <el-table-column prop="originemail" label="email">
                </el-table-column>
                <el-table-column prop="isdeleted" label="是否删除
                ">
                </el-table-column>
               
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="openEditUI(scope.row.coid)" type="primary" icon="el-icon-edit" circle
                            size="mini"></el-button>
                        <el-button @click="deleteStock(scope.row.coid)" type="danger" icon="el-icon-delete" circle
                            size="mini"></el-button>
                        <el-button @click="goBack()" icon="el-icon-refresh"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchModel.pageNo" :page-sizes="[5, 10, 20, 50]" :page-size="searchModel.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>


        <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="oginginForm" ref="originFormRef" :rules="rules">
                <el-form-item prop="originname" label="Name of the supplier" :label-width="formLabelWidth">
                    <el-input v-model="oginginForm.originname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="originphone" label="Phone of the supplier" :label-width="formLabelWidth">
                    <el-input v-model="oginginForm.originphone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="originemail" label="Email of the supplier" :label-width="formLabelWidth">
                    <el-input v-model="oginginForm.originemail" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveProduct">确 定</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  <script>

import originManager from '@/api/originManager';


  export default {
   
    data() {
      return {
        rules: {

},
        formLabelWidth: '130px',
        originList: [],
        title: '',
        searchModel: {
                coid: '',
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            dialogFormVisible: false,
            oginginForm: {}
      };

    },
   
    methods: {
      saveProduct() {
            // 触发表单验证
            this.$refs.originFormRef.validate((valid) => {
                if (valid) {
                    // 提交保存请求
                    originManager.saveOrigin(this.oginginForm).then(response => {
                        // 成功提示
                        this.$message({
                            message: response.message,
                            product: 'success'
                        });
                        // 关闭对话框
                        this.dialogFormVisible = false;
                        // 刷新表格数据
                        this.getoriginList();
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
      openEditUI(coid) {
            if (coid == null) {
                this.title = '新增分类';
            } else {
                this.title = '修改分类';
                originManager.getByCoId(coid).then(response => {
                    this.oginginForm = response.data;
                });
            }
            this.dialogFormVisible = true;
        },
      goBack() {
            this.searchModel.coid = '';
            
            this.searchModel.pageNo = 1;

            // 返回操作逻辑
            this.getoriginList();
        },
        clearForm() {
            this.oginginForm = {};
            this.$refs.originFormRef.clearValidate();
        },
      handleSizeChange(pageSize) {
            this.searchModel.pageSize = pageSize;
            this.getoriginList();
        },
        handleCurrentChange(pageNo) {
            this.searchModel.pageNo = pageNo;
            this.getoriginList();
        },
        getoriginList() {
          originManager.getoriginList(this.searchModel).then(response => {
                this.originList = response.data.rows;
                this.total = response.data.total;
            });
        },
        deleteStock(coid) {
          originManager.deleteStock(coid).then(() => {
      // 删除成功后执行的逻辑，比如重新获取库存列表
            this.getoriginList();
    });
          
        }


    },
      created() {
        this.getoriginList();
    }
    }
  </script>
   <style>
   /* 在这里编写组件的样式 */
   </style>
  
 